<template>
<div >
  <div>
    <div style="width: 100%;height: 100px;background-color: #999999">
      <span style="color: #2b333b;font-size: 22px;margin: 12px">试卷名称:</span>
      <div style="width: 200px;display: inline-block;margin: 12px;font-size: 22px;color: red">
        {{testMessage.testName}}
      </div>
      <span style="color: #2b333b;font-size: 22px;margin: 12px">课程名称:</span>
      <div style="width: 300px;display: inline-block;margin: 12px;font-size: 22px;color: red">
        {{testMessage.className}}
      </div>
      <span style="color: #2b333b;font-size: 22px;margin: 12px">限时:</span>
      <div style="width: 100px;display: inline-block;margin: 12px;font-size: 22px;color: red">
            {{testMessage.time}}分钟
      </div>
      <div style="width: 100px;display: inline-block;margin: 12px;font-size: 22px;float: right" v-if="s.code===0">
        <el-button type="primary" @click="uploadAnswer; $router.push({name:'MyTest'});">提交</el-button>
      </div>
    </div>

  </div>
  <div>
    <el-card class="box-card " v-for="(item, index1) in questions" :key="index1" id="tp" >
      <div slot="header" class="clearfix">
        <el-input v-model="item.contents" :readonly="true">
          <template slot="prepend"><p> 题目{{index1+1}} </p></template>
        </el-input>
      </div>
      <el-radio-group  v-model="answer[index1]">
        <div style="display: inline;">
          <el-radio v-for="(items, index2) in item.testOptions" :key="index2" v-bind:label="index2+1+''"
                    style="margin: 5px 0 5px 0 ;float:left;width:70%;font-size: 18px">
            {{items}}
          </el-radio >
        </div>
      </el-radio-group>
      <div v-if="s.code===1" style="margin-top: 15px;margin-right: 15px ;width: 1000px" >
        <p style="font-size: 16px;color: red;display:inline-flex;width: 400px">
          参考答案：{{item.testOptions[parseInt(item.answer)-1]}}
        </p>
        <p style="font-size: 16px;color: black;display: inline-flex;float: right;width: 400px">
          你的答案：{{item.testOptions[parseInt(userAnswer[index1])-1]}}
        </p>
      </div>
      <div style="margin-top: 15px;width:80%;margin-right: 15px ;">
        <div style="display: inline-flex;margin-left: 20px;float: right;color: red">
          分值： {{item.value}} 分
        </div>
      </div>
    </el-card>
    <div style="height: 30px"></div>
  </div>
</div>
</template>

<script>
export default {
  name: "Exam",
  data(){
    return{
      testMessage:{},
      answerFile:'',
      questions:[],
      userAnswer:[],
      answer:[],
      s:{},
      mywar:'',
    }
  },
  methods:{
    uploadAnswer(){
      this.$axios.post('/uploadAnswer',{data:this.answer}).then(res=> {
        this.answerFile = res.data;
        this.$axios.post('/uploadTestUser',
            {
              testId:this.testMessage.testId,
              userId:this.Cookies.get("userId"),
              answerFile:this.answerFile,
              testFile:this.testMessage.testFile,
              score:0,
              types:1.

            }).then(()=> {});
        this.$message({
          type: 'success',
          message: '提交成功!'
        });
        clearTimeout(this.mywar);
      });
    },
    async getScore() {
        var p='';
        await this.$axios.post('/getScore', {
          userId: this.Cookies.get("userId"),
          testId: this.testMessage.testId
        }).then(res => {
          this.s=res.data;
          if(this.s.code===1)
              p=this.s.testUser.answerFile;
        });
        return p;
    },
    getTest(type){
      this.$axios.post('/getTestPaper',{
        name:this.testMessage.testFile,
        type:type
      }).then(
          resp=>{
            this.questions=resp.data;
            this.answer=new Array(this.questions.length)
          }
      )}
  },
  mounted() {
    this.$axios.post('/getTestById',{id:this.$route.query.testId})
    .then(res=> {
      this.testMessage = res.data;
        this.getScore().then(res => {
          if(res!=='') {
            this.getTest(1);
            this.$axios.post('/getUserAnswer', {file:res}
            ).then(resp=>{
              this.userAnswer=resp.data
            })
          }
          else {
            this.getTest(0);
            this.mywar=setTimeout(this.uploadAnswer,this.testMessage.time*60000)
          }
      });
    })
  },
   destroyed() {
      this.getScore().then(res => {
      if(res==='')
          this.uploadAnswer();
    });
  }
}
</script>

<style scoped>
</style>
